<template>
	<view class="myshop">
		<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
			<!-- 顶部导航栏 -->
			<diyNavBar value='我的店铺' color='#FF6F30' textright='' @goto="$util.redirectTo('/pages/bond/bond')">
			</diyNavBar>

			<!--  -->
			<view style="" class="Fback">
				<!-- <image :src="" ></image> -->
			</view>
			<view class="top-center">
				<view class="top-center-box">
					<view class="img-box">
						<img :src="$util.img(data.avatar)" alt="" style="width: 100%; height: 100%;">
					</view>
					<view class="box-right">
						<view class="box-right-son" style="">
							{{data.nickname}}
						</view>
						<view class="box-right-son" style="">
							ID:{{data.id}}
						</view>
					</view>
				</view>
			</view>

			<!-- 数据统计 -->
			<view class="text-title mtop">
				数据统计
			</view>

			<view class="center-box">
				<view class="center-son">
					<view class="son-text-top">
						{{data.bondprice}}
					</view>
					<view class="son-text-bottom">
						保证金（元）
					</view>
				</view>
				<view class="center-son">
					<view class="son-text-top">
						{{data.taskcount}}
					</view>
					<view class="son-text-bottom">
						发布任务（个）
					</view>
				</view>
				<view class="center-son">
					<view class="son-text-top">
						{{data.taskzcount}}
					</view>
					<view class="son-text-bottom">
						总成交（单）
					</view>
				</view>
				<view class="center-son">
					<view class="son-text-top">
						{{data.taskzjdcount}}
					</view>
					<view class="son-text-bottom">
						接单任务（单）
					</view>
				</view>
				<view class="center-son">
					<view class="son-text-top">
						{{data.reportscount}}
					</view>
					<view class="son-text-bottom">
						被申诉（个）
					</view>
				</view>
				<view class="center-son">
					<view class="son-text-top">
						{{data.userreportscount}}
					</view>
					<view class="son-text-bottom">
						申诉（次）
					</view>
				</view>
			</view>
			`
			<view class="text-title mbtm">
				我的发布
			</view>

			<diyTask :taskSwitch='taskSwitch' :taskList="taskList"></diyTask>
		</mescroll-body>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import diyTask from '../../component/diy-task/diy-task.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		components: {
			diyNavBar,
			diyTask,
			loadingCover
		},
		data() {
			return {
				taskSwitch: false,
				data: {},
				taskList: [],
				upOption: {
					page: {
						num: 0,
						size: 10
					}
				}, //上拉参数配置
				downOption: {
					auto: false,
					page: {
						num: 0,
						size: 10
					}
				}, //下拉参数配置
				new_status:'',
				memberId:''
			}
		},
		onLoad(option){
			console.log(option);
			if(option.member_id) {
				this.new_status = option.id;
				this.memberId = option.member_id
			}else{
				this.new_status = option.id;
			}
			this.getnewstores();
		},
		onShow() {

		},
		methods: {
			getnewstores(){
				let data = {
					status:this.new_status,
				}
				if(this.memberId){
					data.meber_id = this.memberId
				}
				this.$http.sendrequest('/member/Personal_stores', data, {
					tokenJudge: true
				}).then(res => {
					console.log(res)
					this.data = res.data;
				})
			},
			// 下拉刷新
			downCallback(page) {
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				let data = {
					page: page.num,
					page_size: page.size,
					status:this.new_status,
				}
				if(this.memberId){
					data.meber_id = this.memberId
				}
				this.$http.sendrequest('/member/Membertask', data, {
					tokenJudge: true,
				}).then(res => {
					// this.taskList = res.data.list;
					
					if(res.code == 1){
						if(page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data.list);
						this.mescroll.endBySize(res.data.list.length, res.data.count);
						
						this.$refs.loadingCover.hide();
						console.log(this.taskList)
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.myshop {
		min-height: 100vh;
		background: $uni-content-background-color;
		font-family: PingFangSC-regular;
		position: relative;

		.top-center {
			width: 92%;
			background-color: white;
			height: 100px;
			margin-left: 4%;
			position: absolute;
			top: 80px;
			border-radius: 10px;
			box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.Fback {
			width: 100%;
			height: 80px;
			background-color: #FF6F30;
		}

		.top-center-box {
			width: 80%;
			height: 70%;
			display: flex;
		}

		.img-box {
			width: 23%;
			height: 100%;
			max-width: 110rpx;
			max-height: 110rpx;
			overflow: hidden;
			border-radius: 300px;
			margin-top: 10rpx;
		}

		.box-right {
			width: 70%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.box-right-son {
			width: 100%;
			height: 50%;
			display: flex;
			align-items: center;
			padding-left: 40rpx;
			font-weight: bold;
			font-size: 16px;
		}

		.text-title {
			margin-left: 14px;
			color: rgba(51, 51, 51, 1);
			font-size: 16px;
			text-align: left;
			font-family: PingFangSC-medium;
			font-weight: bold;
		}

		.mtop {
			margin-top: 120rpx;
		}

		.center-box {
			margin-left: 4%;
			margin-top: 4%;
			width: 92%;
			height: 200px;
			line-height: 20px;
			border-radius: 12px;
			background-color: rgba(255, 255, 255, 1);
			text-align: center;
			box-shadow: 0px 2px 6px 0px rgba(225, 225, 225, 40);
			display: flex;
			flex-wrap: wrap;
		}

		.center-son {
			width: 33.33%;
			height: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}

		.son-text-top {
			color: rgba(255, 111, 48, 1);
			font-size: 20px;
			text-align: center;
			height: 30%;
			padding-top: 30rpx;
		}

		.son-text-bottom {
			color: rgba(16, 16, 16, 1);
			font-size: 13px;
			text-align: center;
			height: 40%;
			width: 100%;
		}

		.mbtm {
			margin-bottom: 4%;
		}
	}
</style>
